import React, { Component } from 'react';
import { Link } from 'react-router-dom'
// import { wingBlank } from 'antd-mobile'
import './shopCar.scss';
import noCardOop from '../../../images/shopCard/no-card-oops.png';
import cardPic from '../../../images/shopCard/1761389_200_200.jpg';
// 引入头部组件
import Header from 'components/Header'
export default class ShopCar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showNum: 'false'
        }
        this.NumClick = this.NumClick.bind(this);
    }
    // 点击编辑
    NumClick() {
        this.setState({
            showNum: 'true'
        })
    }

    render() {
        console.log(this.props.location.productName)
        return (
            <div className="shopcar">
                <Header ></Header>
                {/* 内容 */}
                <section className="section">
                    {/* 没有商品提示页 */}
                    <div className="no-content" >
                        <p className="noCardPic"><img src={noCardOop} alt="无商品提示图片" /></p>
                        <p className="card-tips">您的购物车中没有商品,请先去挑选心爱的商品吧！</p>
                        <p className="shop-around"><Link to="home">去逛逛</Link></p>
                    </div>

                    {/* 有商品提示页 */}
                    <div className="shop-list">
                        {/* 倒计时 */}
                        <p className="count-down"><i className="iconfont icon-shijian"></i><span> 12/23</span> <span>结算时间结束,商品可能被抢空,请尽快结算</span></p>
                        {/* 购物车所选商品 */}

                        <ul className="groups">
                            <li className="group">
                                <p className="group-header"> <span className="hook"><i className="iconfont icon-gou"></i></span>发货渠道 <span></span></p>
                                <ul className="group-content">
                                    <li className="item">
                                        <span className="check-box-checked iconfont icon-gou"></span>
                                        <div className="img-title">
                                            {/* <div><img className="img-wrap">图片</img></div> */}
                                            <div className="img-wrap"><img src={cardPic} alt="提示"></img></div>
                                            <div className="text-wrap">
                                                <div className="title">
                                                    <span className="red">[极速免税]</span>
                                                    兰蔻粉水清滢柔肤水200ml
                                                </div>
                                                <div className="sub-title-1">
                                                    <span>200ML</span> <span>×3</span>
                                                </div>
                                                    {/* 加减商品数量点击编辑显示*/}
                                                <div className="number-editor">
                                                    <span className="decrease"> — </span>
                                                    <span>3</span>
                                                    <span className="increase"> + </span>
                                                </div>
                                                {/* 编辑商品 */}
                                                <div className="price-edit1" >
                                                    <span className="price editing red"> ¥208 </span>
                                                    <div className="actions">
                                                        <span className="delete" >删除</span> | <span className="action-finish">完成</span>
                                                    </div>
                                                </div>

                                                <div className="price-edit">
                                                    <span className="price red"> ¥208 </span>
                                                    <span className="edit" onClik={this.NumClick}>编辑</span>
                                                </div>
                                            </div>

                                        </div>
                                        {/* 是否删除商品 点击显示*/}
                                        <div className="over-confirm">
                                            <div className="dialog">
                                                <div className="cancel-text">确定要删除此商品？</div>
                                                <div className="btns">
                                                    <div className="drop-cancel">
                                                        <span>取消</span>
                                                    </div>
                                                    <div className="confirm-cancel">
                                                        <span>确定</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                <div className="group-tail red">
                                    <span className="iconfont icon-mian"></span>
                                    <span>已享指定商品包邮</span>
                                </div>
                            </li>
                            <li className="group">
                                <p className="group-header"> <span className="hook"><i className="iconfont icon-gou"></i></span>发货渠道 <span></span></p>
                                <ul className="group-content">
                                    <li className="item">
                                        <span className="check-box-checked iconfont icon-gou"></span>
                                        <div className="img-title">
                                            {/* <div><img className="img-wrap">图片</img></div> */}
                                            <div className="img-wrap"><img src={cardPic} alt="提示"></img></div>
                                            <div className="text-wrap">
                                                <div className="title">
                                                    <span className="red">[极速免税]</span>
                                                    兰蔻粉水清滢柔肤水200ml
                                                </div>
                                                <div className="sub-title-1">
                                                    <span>200ML</span> <span>×3</span>
                                                </div>

                                                <div className="price-edit">
                                                    <span className="price red"> ¥208 </span>
                                                    <span className="edit">编辑</span>
                                                </div>
                                                 {/* 加减商品数量点击编辑显示*/}
                                                <div className="number-editor">
                                                    <span className="decrease"> - </span>
                                                    <span>3</span>
                                                    <span className="increase"> + </span>
                                                </div>
                                                {/* 编辑商品 */}
                                                <div className="price-edit1" >
                                                    <span className="price editing red"> ¥208 </span>
                                                    <div className="actions">
                                                        <span className="delete">删除</span>|
                                                        <span className="action-finish">完成</span>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                        {/* 是否删除商品 点击显示*/}
                                        <div className="over-confirm">
                                            <div className="dialog">
                                                <div className="cancel-text">确定要删除此商品？</div>
                                                <div className="btns">
                                                    <div className="drop-cancel">
                                                        <span>取消</span>
                                                    </div>
                                                    <div className="confirm-cancel">
                                                        <span>确定</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                <div className="group-tail red">
                                    <span className="iconfont icon-mian"></span>
                                    <span>已享指定商品包邮</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    {/* 去结算 */}
                    <div className="submit-bottom submit-bottom-padding">
                        <div className="sub-info">
                            {/* <span className="check-box-checked"><i className="iconfont icon-gou"></i></span> */}
                            <i className="iconfont icon-gou"></i>
                            <span className="all-check-text">全选</span>
                            <div className="summary">
                                <span>合计</span>
                                <span className="red">¥44991.9</span>
                            </div>
                        </div>
                        <div className="submit-btn go-to-submit"> 去结算
                            <span>(16)</span>
                        </div>
                    </div>
                </section>
            </div>
        )
    }
}
